<template>
	<!-- 主页 -->
	<div>
		<!-- list -->
		<div class="list">
			<div class="student">
				<div>
					<!-- 学生人数 -->
					<p>{{ studentData.length }}</p>
					<p>学生人数</p>
				</div>
				<div>
					<img src="../assets/sutdents.png" alt="" style="margin-top: 20px;">
				</div>
			</div>
			<div class="student">
				<div>
					<!-- 班级数 -->
					<p>{{ tableData.length }}</p>
					<p>班级数</p>
				</div>
				<div>
					<img src="../assets/books.png" alt="" style="margin-top: 20px;">
				</div>
			</div>
			<div class="rates">
				<!-- 优差生比率 -->
				<div>
					<p>差生：<span>2313</span></p>
					<p>优生：<span>99</span></p>
				</div>
				<div>
					<img src="../assets/rates.png" alt="" style="margin-top: 20px;">
				</div>
			</div>
			<div class="rates" style="background-color: rgb(23, 97, 253); color: white;"
				@click="$router.push({ 'path': '/NewPaper' })">
				<!-- 新建试卷 -->
				<div class="paper">
					<div>
						<i class="el-icon-document-add"></i>
					</div>
					<div>
						<p style="font-size: 20px; font-weight: 600px;">新建试卷</p>
						<p>题库：<span>{{ info.length }}</span></p>
					</div>
				</div>
			</div>
		</div>
		<!-- 班级管理 -->
		<div class="classMange">
			<div style="display: flex;align-items: center;">
				<div>
					<span style="font-size: 25px;font-weight: 600;">班级管理</span>
				</div>
				<el-button class="icon-plus" @click="clickChange('addClass')">
					<i class="el-icon-circle-plus" style="margin-right: 10px;font-size: 20px;"></i><span>新增班级</span>
				</el-button>
				<addClass v-if="Visiable" ref="dialog" @closeDialog="handleClose"></addClass>
			</div>
			<div style="margin-top: 20px;overflow-y: auto;height: 290px;">
				<el-table :data="tableData" border style="width: 94%" :cell-style="rowStyle">
					<el-table-column prop="classroom" label="教室" width="125" align="center">
					</el-table-column>
					<el-table-column prop="manger" label="项目经理" width="125" align="center">
					</el-table-column>
					<el-table-column prop="teacherman" label="班主任" width="125" align="center">
					</el-table-column>
					<el-table-column prop="job" label="就业" width="125" align="center">
					</el-table-column>
					<el-table-column prop="startime" label="开班时间" width="185" align="center">
					</el-table-column>
					<el-table-column prop="endtime" label="结课时间" width="185" align="center">
					</el-table-column>
					<el-table-column prop="score" label="班级平均分" width="124" align="center">
					</el-table-column>
					<el-table-column prop="done" label="操作" width="190" align="center">
						<template slot-scope="scope">
							<!-- 编辑弹窗 -->
							<el-popover :disabled="teemp" placement="left-start" title="题目" width="800" trigger="click">
								<el-form ref="form" :model="addClassData" label-width="80px">
									<div style="display: flex;">
										<el-form-item label="教室:" style=" width: 300px;">
											<el-select v-model.trim="addClassData.classroom" placeholder="请选择教室">
												<el-option label="201" value="201"></el-option>
												<el-option label="202" value="202"></el-option>
											</el-select>
										</el-form-item>
									</div>
									<div style="display: flex;">
										<el-form-item label="项目经理:" style="width: 300px;">
											<el-input v-model.trim="addClassData.manger" placeholder="请输入内容"></el-input>
										</el-form-item>
										<el-form-item label="班主任:" style="width: 300px;">
											<el-input v-model.trim="addClassData.teacherman" placeholder="请输入内容"></el-input>
										</el-form-item>
										<el-form-item label="就业:" style="width: 300px;">
											<el-input v-model.trim="addClassData.job" placeholder="请输入内容"></el-input>
										</el-form-item>
									</div>
									<div>
										<span style="margin-left: 10px;">开班时间：</span><el-date-picker
											v-model.trim="addClassData.startime" label="" type="date" placeholder="选择日期"
											value-format="yyyy-MM-dd">
										</el-date-picker>
										<span style="margin-left: 10px;">结班时间：</span><el-date-picker
											v-model.trim="addClassData.endtime" type="date" placeholder="选择日期"
											value-format="yyyy-MM-dd">
										</el-date-picker>
									</div>
									<div>
										<el-form-item label="班级备注:" width="100px" style="margin-top: 20px;width: 400px;">
											<el-input v-model.trim="addClassData.classnote" placeholder="请输入内容"
												clearable></el-input>
										</el-form-item>
									</div>
									<el-button type="primary" style="background-color: rgb(23, 97, 253);margin-left: 500px;"
										@click="editData(addClassData)">编辑</el-button>
								</el-form>
								<i @click="editClass(scope.row)" slot="reference" type="text" size="small"
									class="el-icon-edit" style="color: rgb(70, 184, 239);cursor: pointer;"></i>
							</el-popover>
							<i type="text" size="small" slot="reference" class="el-icon-delete"
								@click="deleteclass(scope.row)" style="margin-left: 30px;color: red;cursor: pointer;"></i>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 学员管理 -->
		<div class="studentMange">
			<div style="margin-top: 20px;display: flex;align-items: center;">
				<div>
					<span style="font-size: 25px;font-weight: 600;">学员管理</span>
				</div>
				<el-button class="icon-plus" @click="clickChangePage('Addlearns')">
					<i class="el-icon-circle-plus" style="margin-right: 10px;font-size: 20px;"></i><span>新增学员</span>
				</el-button>
				<Addlearners v-if="Visiables" ref="dialog" @closeDialog="handleClose"></Addlearners>
			</div>
			<div style="margin-top: 20px;overflow-y: auto;height: 290px;">
				<el-table :data="studentData" border style="width: 96%" :cell-style="rowStyle">
					<el-table-column prop="sname" label="姓名" width="120" align="center">
					</el-table-column>
					<el-table-column prop="school" label="学校" width="150" align="center">
					</el-table-column>
					<el-table-column prop="consulteacher" label="咨询" width="120" align="center">
					</el-table-column>
					<el-table-column prop="gradtime" label="日期" width="136" align="center">
					</el-table-column>
					<el-table-column prop="studentstate" label="状态" width="120" align="center">
					</el-table-column>
					<el-table-column prop="fraction" label="分数" width="120" align="center">
					</el-table-column>
					<el-table-column prop="urgentphone" label="手机号" width="165" align="center">
					</el-table-column>
					<el-table-column prop="sid" label="学号" width="150" align="center">
					</el-table-column>
					<el-table-column prop="done" label="操作" width="127" align="center">
						<template slot-scope="scope">
							<!-- 编辑弹窗  -->
							<el-popover :disabled="teemp" :model="ruleForm" placement="left-start" title="编辑班级"
								trigger="click">
								<el-form ref="ruleForm" class="demo-ruleForm">
									<div class="search">
										<!-- 姓名 -->
										<el-form-item label="姓名">
											<el-input v-model.trim="ruleForm.sname" placeholder="请输入内容"
												style="width: 190px;"></el-input>
										</el-form-item>
										<!-- 性别 -->
										<el-form-item label="姓别">
											<el-select v-model.trim="ruleForm.sex" filterable placeholder="请选择"
												style="width: 185px;">
												<el-option v-for="item in options2" :key="item.value" :label="item.label"
													:value="item.label">
												</el-option>
											</el-select>
										</el-form-item>
										<!-- 在读状态 -->
										<el-form-item label="在读状态">
											<el-select v-model.trim="ruleForm.studentstate" filterable placeholder="请选择"
												style="width: 185px;">
												<el-option v-for="item in options3" :key="item.value" :label="item.label"
													:value="item.label">
												</el-option>
											</el-select>
										</el-form-item>
									</div>
									<div class="search">
										<!-- 学校 -->
										<el-form-item label="学校">
											<el-input v-model.trim="ruleForm.school" placeholder="请输入内容"
												style="width:600px;"></el-input>
										</el-form-item>
									</div>
									<div class="search">
										<!-- 专业 -->
										<el-form-item label="专业">
											<el-input v-model.trim="ruleForm.professional" placeholder="请输入内容"
												style="width:285px;"></el-input>
										</el-form-item>
										<!-- 毕业时间 -->
										<el-form-item label="毕业时间">
											<el-date-picker v-model.trim="ruleForm.gradtime" type="date" placeholder="选择日期"
												style="width:285px;" value-format="yyyy-MM-dd">
											</el-date-picker>
										</el-form-item>
									</div>
									<div class="search">
										<!-- 手机号 -->
										<el-form-item label="手机号">
											<el-input v-model.trim="ruleForm.phone" placeholder="请输入内容"
												style="width:285px;"></el-input>
										</el-form-item>
										<!-- 出生年月 -->
										<el-form-item label="出生年月">
											<el-date-picker v-model.trim="ruleForm.borntime" type="date" placeholder="选择日期"
												style="width:285px;" value-format="yyyy-MM-dd">
											</el-date-picker>
										</el-form-item>
									</div>
									<div class="search">
										<!-- 紧急联系人 -->
										<el-form-item label="紧急联系人">
											<el-input v-model.trim="ruleForm.urgent" placeholder="请输入内容"
												style="width:285px;"></el-input>
										</el-form-item>
										<!-- 紧急联系人电话 -->
										<el-form-item label="紧急联系人电话">
											<el-input v-model.trim="ruleForm.urgentphone" placeholder="请输入内容"
												style="width:285px;"></el-input>
										</el-form-item>
									</div>
									<div class="search">
										<!-- 咨询老师 -->
										<el-form-item label="咨询老师">
											<el-input v-model.trim="ruleForm.consulteacher" placeholder="请输入内容"
												style="width: 185px;"></el-input>
										</el-form-item>
										<!-- 培训班级 -->
										<el-form-item label="培训班级">
											<el-select v-model.trim="ruleForm.cid" filterable placeholder="请选择"
												style="width: 185px;">
												<el-option v-for="item in options4" :key="item.value" :label="item.label"
													:value="item.label">
												</el-option>
											</el-select>
										</el-form-item>
										<!-- 学费 -->
										<el-form-item label="学费">
											<el-input v-model.trim="ruleForm.tuition" placeholder="请输入内容"
												style="width: 180px;"></el-input>
										</el-form-item>
									</div>
									<div style="margin-top: 10px;">
										<el-button type="primary" @click="editstudent(ruleForm)">编辑学员</el-button>
									</div>
								</el-form>
								<i type="text" size="small" class="el-icon-edit"
									style="color: rgb(70, 184, 239);cursor: pointer;" slot="reference"
									@click="open(scope.row)"></i>
							</el-popover>
							<template>
								<i type="text" size="small" class="el-icon-delete"
									style="margin-left: 30px;color: red;cursor: pointer;" slot="reference"
									@click="deleteStudent(scope.row)"></i>
							</template>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
	</div>
</template>

<script>
import axios from 'axios';
import addClass from '@/components/class/addClass.vue';
import Addlearners from '@/components/student/Addlearners.vue';
export default {
	components: {
		addClass,
		Addlearners,
	},
	data() {
		return {
			//班级管理数据
			tableData: [{
				classname: '',
				classroom: '',//教室
				manger: '',///项目经理
				teacherman: '',//班主任
				job: '',//就业
				startime: '',//开班时间
				endtime: '',//结班时间
				classnote: '',//备注
				score: 68.4,
			}],
			//学员管理数据
			studentData: [],
			Visiable: false,// 班级
			Visiables: false,// 学员
			info: '',// 题库
			addClassData: {
				classname: '',// 班级
				classroom: '',//教室
				manger: '',///项目经理
				teacherman: '',//班主任
				job: '',//就业
				startime: '',//开班时间
				endtime: '',//结班时间
				classnote: ''//备注
			},
			eidtid: '',//用来接收编辑时的id传给后端
			teemp: false,
			ruleForm: [
				{
					sname: '',//姓名
					school: '',//学校
					consulteacher: '',//咨询
					enroltime: '',//入学日期
					studentstate: '',//状态
					fraction: '',//分数
					urgentphone: '',//手机号码
					sid: '',//学号
				}
			],
			options2: [{
				value: '选项1',
				label: '男'
			}, {
				value: '选项2',
				label: '女'
			},],
			//状态
			options3: [{
				value: '选项1',
				label: '在读'
			}, {
				value: '选项2',
				label: '毕业'
			}],
			//培训班级
			options4: [],
			Visiable: false,// 班级
			visiable: false,// 班级删除
			Visiables: false,// 学员
			info: '',// 题库
			addClassData: {
				classname: '',// 班级
				classroom: '',//教室
				manger: '',///项目经理
				teacherman: '',//班主任
				job: '',//就业
				startime: '',//开班时间
				endtime: '',//结班时间
				classnote: ''//备注
			},
			eidtid: '',//用来接收编辑时的id传给后端
			teemp: false,
			ruleForm: [
				{
					sname: '',//姓名
					school: '',//学校
					consulteacher: '',//咨询
					enroltime: '',//入学日期
					studentstate: '',//状态
					fraction: '',//分数
					urgentphone: '',//手机号码
					sid: '',//学号
				}
			],
			options2: [{
				value: '选项1',
				label: '男'
			}, {
				value: '选项2',
				label: '女'
			},],
			//状态
			options3: [{
				value: '选项1',
				label: '在读'
			}, {
				value: '选项2',
				label: '毕业'
			}],
			//培训班级
			options4: [],
		}
	},
	mounted() {
		// 获取题库
		this.$axios.get('/question/getquestion').then((res) => {
			this.info = res.data.data;
		})
		// 获取班级
		this.getclass();
		//获取学员信息
		this.getstatus();
	},
	methods: {
		// 获取班级
		getclass() {
			axios.get('/classmon/getClass').then((response) => {
				this.tableData = response.data.data;
			});
		},
		//获取学员信息
		getstatus() {
			this.$axios.get('/statusmon/getStudent',
				{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
					this.studentData = response.data.data
				})
		},
		clickChange(data) {
			this.Visiable = true;
			this.$nextTick(() => {
				this.$refs.dialog.init(data)
			})
		},
		clickChangePage(data) {
			this.Visiables = true;
			this.$nextTick(() => {
				this.$refs.dialog.init(data)
			})
		},
		// 删除班级
		deleteclass(id) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let payload = {
					id: id.classid,
				};
				axios.delete('/classmon/deleteclass', { params: payload }).then((response) => {
					if (response.data.status !== 200) {
						return this.$message({
							type: 'error',
							message: '删除班级失败'
						});
					}
					this.$message({
						type: 'success',
						message: '删除班级成功'
					});
					this.getclass();
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		//编辑班级
		editClass(scope) {
			this.addClassData = scope;
			this.eidtid = scope.classid;
		},
		editData() {
			console.log(1223, this.addClassData);
			this.$axios.put(`/classmon/editClass/${this.eidtid}`, this.addClassData,
				{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
					if (response.data.status == 200) {
						this.teemp = true;
						this.getclass();
						return this.$message({
							type: 'success',
							message: '编辑成功'
						})
					}
				})
		},
		rowStyle() {
			return "text-align:center";
		},
		//编辑学员       
		open(scope) {
			this.ruleForm = scope;
			this.editid = scope.sid;
		},
		editstudent(ruleForm) {
			this.$axios.put(`/statusmon/editStudent/${this.editid}`, this.ruleForm,
				{ headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((response) => {
					console.log(response);
					if (response.data.status == 200) {
						this.teemp = true;
						this.getstatus();
						return this.$message({
							type: 'success',
							message: '编辑成功'
						})
					}
				})
		},
		//删除学员
		deleteStudent(ids) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let payload = {
					id: ids.sid,
				};
				axios.delete('/statusmon/deleteStudent', { params: payload }).then((response) => {
					console.log(response);
					if (response.data.status !== 200) {
						return this.$message({
							type: 'error',
							message: '删除学员失败'
						});
					}
					this.$message({
						type: 'success',
						message: "删除学员成功"
					});
					this.getstatus();
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},
		handleClose(data) {
			// 获取班级
			this.getclass();
			//获取学员信息
			this.getstatus();
		},
	}
}
</script>

<style lang="less" scoped>
body {
	background-color: rgb(239, 239, 239);
}

.list {
	width: 1300px;
	margin: auto;
	display: flex;
	justify-content: space-between;
	margin-top: 30px;
}

.list>div {
	width: 280px;
	height: 100px;
	box-shadow: 0px 0px 30px rgba((0), 0, 0, 0.18);
}

.student {
	display: flex;
	justify-content: space-around;
}

.student>div p:first-child {
	font-weight: 600;
	font-size: 24px;
	margin-bottom: 10px;
}

.student>div p:last-child {
	font-size: 12px;
}

.rates {
	display: flex;
	justify-content: space-around;
}

.rates p:first-child {
	margin-left: 20px;
}

.paper {
	display: flex;
}

.el-icon-document-add {
	font-size: 50px;
	margin-right: 40px;
	margin-top: 20px;
}

.classMange,
.studentMange {
	width: 1300px;
	height: 400px;
	margin: auto;
	box-shadow: 0px 0px 30px rgba((0), 0, 0, 0.18);
	padding: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	box-sizing: border-box;
}

.icon-plus {
	width: 140px;
	height: 50px;
	background-color: rgb(23, 97, 253);
	color: white;
	border-radius: 10px;
	margin-left: 20px;
}

.search {
	display: flex;
}

.search p {
	text-align: left;
	color: #69719D;
}

.search div {
	margin-right: 10px;
}
</style>